﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Form Validator</title>
    <link href="index.css" type="text/css" rel="stylesheet">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css" />
</head>
<body>
<div class="container">
    <h1>
        Sign Up Today!
    </h1>
    <!-- Form -->

        <form id="form">
            <!-- Full Name -->
            <div class="form-group">
                <label for="name">Full Name</label>
                <input type="text" id="name" name="name" placeholder="Full Name" required minlength="3" maxlength="100" />
            </div>
            <!-- Phone Number -->
            <div class="form-group">
                <label for="phone">Phone Number</label>
                <input type="tel" id="phone" name="phone" placeholder="555-555-5555" required pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" />
            </div>
            <!-- Email Address -->
            <div class="form-group">
                <label for="email">Email Address</label>
                <input type="email" id="email" name="email"  placeholder="email@address.com" required/>
            </div>
            <!-- Website URL -->
            <div class="form-group">
                <label for="website">Website URL</label>
                <input type="url" id="website" name="website"
                placeholder="http://jacinto.design" required/>
            </div>
            <!-- Password -->
            <div class="form-group">
                <label for="password">Password</label>
                <input type="password" id="password"  name="password"  placeholder="Create Password" required/>
            </div>
            <!-- Confirm Password -->
            <div class="form-group">
                <label for="confirmPwd">Confirm Password</label>
                <input type="password" id="confirmPwd"  name="confirmPwd" placeholder="Confirm Password" required/>
            </div>

            <button type="submit">Register</button>
        </form>
    <!-- Error/Success Message -->
    <div class="message-container">
        <h3 id="message">Don't Hesitate!</h3>
    </div>

</div>

<!-- Scripts -->
<script type="text/javascript" src="index.js"></script>
</body>
</html>